<template>
  <div class="square">
    <el-popover
      placement="bottom"
      :width="tooltip.width"
      trigger="hover"
      popper-class="common-tootip"
      >
      <div v-html="tooltip.content"></div>
      <span slot="reference" class="tooltip"><i class="iconfont icon-wenzishuoming"></i></span>
    </el-popover>
    <p class="word">{{data.main.name}}</p>
    <p class="num" v-if="data.main.type === 'time'">{{num[data.main.value] | timeDown}}</p>
    <p class="num" v-else :class="data.main.type === 'red' && num[data.main.value] ? 'red' :''">{{num[data.main.value]>0 ? num[data.main.value]: 0}}</p>
    <el-row :class="data.sub.length === 0 ? '' : 'sub'">
      <el-row v-for="(item, index) in data.sub" :key="index" class="line20" :gutter="10">
        <el-col :span="12" class="sub-title">{{item.name}}：</el-col>
        <el-col :span="12" class="right" v-if="item.type === 'time'">{{num[item.value] | timeDown}}</el-col>
        <el-col :span="12" class="right" v-else-if="item.type === 'rate'">{{num[item.value] | rate(num[data.main.value])}}</el-col>
        <el-col :span="12" class="right" v-else-if="item.type === 'rateOther'">{{num[item.value] | rate(computedNum)}}</el-col>
        <el-col :span="12" class="right" v-else>{{num[item.value] > 0 ? num[item.value] : 0}}</el-col>
      </el-row>
    </el-row>
  </div>
</template>
<script>
  import {showCountDown} from '@/utils/workflowUtils.js'
  export default {
    name: 'square',
    data () {
      return {
      }
    },
    filters: {
      rate (value, all) {
        if (all) {
          return Math.round(value * 100 / all) + '%'
        }
        return '0%'
      },
      timeDown (value) {
        if (value !== '') {
          return showCountDown(value)
        }
        return value
      }
    },
    props: {
      tooltip: {type: Object, default: function () { return {width: 300, content: ''} }},
      num: {type: Object, default: function () { return {} }},
      computedNum: {type: String | Number, default: ''},
      data: {type: Object, default: function () { return { main: {}, sub: [] } }}
    }
  }
</script>
<style lang="stylus" scoped>
  @import '../../../../assets/common.styl'
  .square
    border 1px solid $c-border1
    margin-bottom 10px
    padding: 18px 0px 0
    height 150px
    text-align center
    border-radius 4px
    position relative
    .tooltip
      position absolute
      right 10px
      top 10px
      color $c-main
    .content
      font-size 13px
    .line20
      line-height 20px
    .num
      font-size 30px
      font-weight bold
      padding 5px 0
      color $c-main
    .word
      color $cf-gray0
      font-size 14px
      font-weight blod
    .sub
      border-top 1px solid #e6e6e6
      padding-top 10px
      .sub-title
        color $cf-gray3
        text-align right
    .right
      text-align left
    .red
      color $c-pink
</style>
